<!--
 * @Description: 数据项管理页面
-->
<template>
  <BaseMainSlot :show-tab="true">
    <template v-slot:btn-box>
      <ActionBar
        :page-no="106"
        :add-active="addActive"
        :has-edit="false"
        :has-save="false"
        :del-active="delActive"
        @add="add"
        @del="del"
      />
    </template>
    <template v-slot:search-box>
      <div class="common-search-item">
        <div class="label">设备名称:</div>
        <div class="input">
          <el-input v-model="deviceName" clearable @keyup.enter.native="search"
            @blur="search"  @clear="search" />
        </div>
      </div>
    </template>
    <template v-slot:table-box>
      <div class="dataitem-main">
        <div v-if="topitemtypeid === 1" class="tr-sid">
          <div class="sid-head">选择设施</div>
          <div class="sid-tree">
            <treeSide @treeselectvalue="treeselectvalue" />
          </div>
        </div>
        <div
          v-if="
            topitemtypeid === 1 || topitemtypeid === 2 || topitemtypeid === 3
          "
          class="tab-box"
        >
          <div class="tab-content">
            <el-table
              v-loading="loading"
              :data="tableData"
              stripe
              border
              height="calc(100% - 50px)"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" :selectable="selectable" />
              <el-table-column type="index" label="序号" width="100" />
              <el-table-column prop="device.deviceName" label="设备名称" />
              <el-table-column prop="device.type" label="设备类型">
                <template v-if="scope.row.deviceFacilityMapperId" slot-scope="scope">
                  <span v-if="scope.row.device.type === '物理'">物联设备</span>
                  <span v-if="scope.row.device.type === '虚拟'">虚拟设备</span>
                </template>
              </el-table-column>
              <el-table-column prop="device.enable" label="设备状态" />
              <el-table-column width="120" label="操作">
                <template v-if="scope.row.deviceFacilityMapperId" slot-scope="scope">
                  <!--                  <el-button class="text-btn-cursor" type="text" size="small" @click="handleEdit(scope.row)"><i-->
                  <!--                    class="el-icon-edit-outline"></i> 修改-->
                  <!--                  </el-button>-->
                  <el-button
                    v-if="judgePermission(106, 'delete')"
                    class="text-btn-cursor cursor-delete"
                    type="text"
                    size="small"
                    @click="handleDelete(scope.row)"
                  >
                    <i class="el-icon-delete"></i> 删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <Pagination
              :page-size="pageSize"
              :current-page="currentPage"
              :total-size="totalSize"
              @changePageSize="changePageSize"
              @changeCurrentPage="changeCurrentPage"
            />
          </div>
        </div>
      </div>
      <el-dialog :title="titleText + '设备'" :visible.sync="dialogFormVisible" @close="cancel">
        <!-- 111 -->
        <el-form ref="formData" :model="formData" label-position="left" class="w100p">
          <el-form-item label="设备列表" class="w100p checkbox">
            <el-select v-model="formData.deviceNo" clearable filterable>
              <el-option
                v-for="(item, index) in deviceList"
                :key="index"
                :label="item.deviceName"
                :value="item.deviceNo"
              />
            </el-select>
          </el-form-item>
          <!--          <el-form-item label="设备列表" class="w100p checkbox">-->
          <!--            <el-checkbox-->
          <!--              v-model="checkAll"-->
          <!--              :indeterminate="isIndeterminate"-->
          <!--              @change="handleCheckAllChange"-->
          <!--            >全选</el-checkbox>-->
          <!--            <div class="checkboxck" style="margin: 15px 0;">-->
          <!--              <el-button type="text" @click="checkboxHeight">{{-->
          <!--                checkboxName-->
          <!--                }}</el-button>-->
          <!--            </div>-->
          <!--            <div-->
          <!--              ref="checkboxGroup"-->
          <!--              class="checkbox-group"-->
          <!--              :style="{ height: GroupHeight }"-->
          <!--              style="transition: height 1s"-->
          <!--            >-->
          <!--              <el-checkbox-group-->
          <!--                v-model="deviceNoList"-->
          <!--                @change="handleCheckedCitiesChange"-->
          <!--              >-->
          <!--                <el-checkbox-->
          <!--                  v-for="batchitem in cities"-->
          <!--                  :key="batchitem.deviceNo"-->
          <!--                  :label="batchitem.deviceNo"-->
          <!--                >-->
          <!--                  {{ batchitem.deviceName }}-->
          <!--                </el-checkbox>-->
          <!--              </el-checkbox-group>-->
          <!--            </div>-->
          <!--          </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancel('formData')">取 消</el-button>
          <el-button class="zh-button-two" type="primary" @click="save">保 存</el-button>
        </div>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>

<script>
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import nowpagereq from "@/api/basic-info-manage/data-item-managemente";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
// import ToptypeSelect from "./components/toptypeselect.vue";
import treeSide from "@/components/selectbutton/trelist.vue";

// import treeSidetwo from "./components/trelistgouqu.vue";
import { mymixin } from "@/utils/mixins";
import { mapGetters } from "vuex";
// import treeSide from "./components/trelist.vue"
export default {
  name: "DataItemManagemente",
  components: {
    ActionBar,
    Pagination,
    BaseMainSlot,
    // ToptypeSelect,
    treeSide
    // treeSidetwo
  },
  mixins: [mymixin],
  data() {
    return {
      testdeviceName: "",
      // 当前可修改列表
      editlist: {},
      // 选中的地块组或地块id
      paramslist: {},
      // 是否展示弹框
      dataaddVisible: false,
      dataaddVisibletwo: false,
      dataaddVisiblethree: false,
      // 数据项类型id
      topitemtypeid: 1,
      // 数据项下拉数据
      dataItemList: [],
      // 下拉选择是否展示idlist
      isshowlist: {
        evr: 0,
        control: 0
      },
      // 设备展示下拉数据
      isshowequipmentstaulist: [
        { name: "是", value: true },
        { name: "否", value: false }
      ],
      // 环境数据展示下拉数据
      isshowevrimentdatalist: [
        { name: "是", value: true },
        { name: "否", value: false }
      ],
      // 当前选中的组织结构id
      nowselctorgid: "",
      // 单位下拉框
      ownUnitList: [],
      // 员工姓名
      deviceName: "",
      // 当前组织机构名
      facilityName: "",
      // 当前选中的数据项数组
      nowSelectList: [],
      // 外部气象站数据
      otherweather: {
        // 可选择的气象站
        rtulist: [],
        // 可选择的数据项
        dataItemList: [],
        // 集中器id
        rtuId: "",
        // 数据项id
        dataItemId: "",
        // 展示数据项名称
        deviceName: "",
        // 数据项单位
        unitId: ""
      },

      // 弹框
      checkAll: false,
      cities: [],
      deviceNoList: [],
      deviceList: [],
      isIndeterminate: true,
      GroupHeight: "100px",
      checkboxName: "展开",
      loading: false
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {
    // nowChanceStau(newval) {
    //   if (newval === 'add') {
    //     this.dataaddVisible = true
    //   }
    //   if (newval === 'edit') {
    //     this.dataaddVisibletwo = true
    //   }
    // }
  },
  created() {},
  mounted() {
    this.getselectdatalist();
  },
  methods: {
    selectable (row) {
      return !('index' in row)
    },
    // 弹框关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // add() {
    //   this.nowChanceStau = "add";
    //   this.dataaddVisible = true;
    // },
    // cancel() {
    //   this.nowChanceStau = "";
    //   this.dataaddVisible = false;
    // },
    // cancelTwo() {
    //   this.nowChanceStau = "";
    //   this.dataaddVisibletwo = false;
    // },
    // 选择数据项
    topitemtype(e) {
      this.topitemtypeid = e;
      // 获取表格数据
      this.getTableDataList();
    },
    // 点击树状触发方法
    treeselectvalue(e) {
      // let dd = e.organizationNo;
      this.paramslist = {};
      // if (!dd) {
      //   this.addActive = false
      //   this.$message.warning("请勿选择此地块组")
      //   return
      // }
      this.facilityName = e.facilityName;
      this.addActive = true;
      if (e.facilityGroupNo) {
        this.paramslist["facilityGroupNo"] = e.facilityGroupNo;
      } else if (e.facilityNo) {
        this.paramslist["facilityNo"] = e.facilityNo;
      }
      // 当前选中的组织结构id
      this.nowselctorgid = e.organizationNo;
      this.getTableDataList();
    },
    dataItem(e) {
      if (this.topitemtypeid === 4) {
        let name = this.otherweather.dataItemList[e].deviceName;
        this.testdeviceName = name;
      } else {
        let name = this.dataItemList[e].deviceName;
        this.testdeviceName = name;
      }
    },
    // 添加时气象站选择
    rtuchang(e) {
      // console.log(e);
      nowpagereq.getrtudataitemlist(e).then(res => {
        this.otherweather.dataItemList = res.data;
      });
    },
    handleCheckAllChange(val) {
      let cities = this.deviceList.map(item => item.deviceNo);
      this.deviceNoList = val ? cities : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      console.log(value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 点击展开
    checkboxHeight() {
      let GroupHeight = this.$refs.checkboxGroup.clientHeight;
      if (GroupHeight <= 120) {
        this.GroupHeight = "400px";
        this.checkboxName = "展开";
      } else {
        this.GroupHeight = "120px";
        this.checkboxName = "收起";
      }
      // return val
    },
    // 获取两个下拉框数据
    getselectdatalist() {
      // 获取数据项选择项
      nowpagereq.getalldataitemselect().then(res => {
        if (res.code === 0) {
          this.$message.error("数据项名称获取失败");
        }

        this.deviceList = res.data;
        this.cities = res.data;

        // console.log(res)
      });
    },
    getTableDataList() {
      // 1物联数据normal 2为水质监测waterQuality 3为气象站数据meteorological
      // category: "",
      this.tableData = [];
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        category: ""
      };
      // 查询表格数据
      nowpagereq.getlist(params, {
        ...this.paramslist,
        deviceName: this.deviceName
      }).then(res => {
        this.loading = true;

        this.loading = false;
        if (res.code === 1) {
          // this.$message.success("查询成功");
        } else {
          this.$message.error("查询失败");
        }
        let data = res.data;
        // 赋值总条数
        this.totalSize = data.totalElements;
        // 赋值数组
        this.tableData = data.content;
        this.addblankmet();
        this.resetActionBar();
      });
    },
    search() {
      this.currentPage = 1;
      this.getTableDataList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    handleEdit(row) {
      this.formData = JSON.parse(JSON.stringify(row));
    },
    handleSelectionChange(list) {
      this.nowSelectList = [];
      let notvalue = true;
      this.nowSelectList = list.map(item => item.deviceFacilityMapperId);
      if (notvalue === false) {
        this.delActive = false;
        this.$message.warning("不可选择空数据！");
        return;
      }
      if (this.nowSelectList.length > 0) this.delActive = true;
      else this.delActive = false;
    },
    delmessage() {
      nowpagereq.dellist(this.nowSelectList).then(res => {
        if (res.code === 1) {
          this.$message.success("删除成功！");
          this.getTableDataList();
        } else {
          this.$message.error("删除失败！");
        }
      });
    },
    handleDelete(data) {
      // nowpagereq.dellist([data.deviceFacilityMapperId]).then((res) => {
      //   if (res.code === 1) {
      //     this.$message.success("删除成功");
      //     this.getTableDataList();
      //   } else {
      //     this.$message.error("删除失败");
      //   }
      // });
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(() => {
          nowpagereq.dellist([data.deviceFacilityMapperId]).then(res => {
            if (res.code === 1) {
              this.$message.success("删除成功");
              this.getTableDataList();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          //
          this.$message("取消删除");
        });
    },
    save() {
      if (this.nowChanceStau === "edit") {
        this.$set(this.formData, "facilityNo", this.paramslist.facilityNo);
        this.formData.organizationNo = sessionStorage.organizationNo;
        nowpagereq.editlist(this.formData).then(res => {
          if (res.code === 1) {
            this.dataaddVisibletwo = false;
            this.$message.success("修改成功！");
            this.getTableDataList();
          } else {
            this.dataaddVisibletwo = false;
            this.$message.error("修改失败！");
          }
        });
      } else if (this.nowChanceStau === "add") {
        // 新增接口
        this.$set(this.formData, "facilityNo", this.paramslist.facilityNo);
        this.formData.organizationNo = sessionStorage.organizationNo;
        // console.log(this.formData);
        nowpagereq.addlist(this.formData).then(res => {
          if (res.code === 1) {
            this.dataaddVisible = false;
            this.$message.success("新增成功！");
            this.getTableDataList();
          } else {
            this.dataaddVisible = false;
            this.$message.error("新增失败！");
          }
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog__wrapper .el-input__inner {
  color: #272929 !important;
}

::v-deep .el-dialog__wrapper .el-dialog {
  width: 500px !important;
}

.dataitem-main {
  width: 100%;
  // height: calc(100% - 110px);
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .tr-sid {
    width: calc(20% - 10px);
    flex-shrink: 0;
    margin-right: 10px;
    height: 100%;
    padding: 10px;
    background-color: #074052;

    .sid-head {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      border-bottom: #fff dashed 1px;
    }

    .sid-tree {
      width: 100%;
      height: calc(100% - 31px);
    }
  }

  .tab-box {
    width: 100%;
    height: 100%;
    position: relative;

    .tab-content {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
  }

  .z-form {
    width: calc(50% - 10px);
    margin-right: 10px;
    margin-left: 60px;
    height: 100%;
    border-left: dashed 1px #fff;

    .el-form {
      width: 100%;
      height: 100%;
      margin: 0 auto;

      ::v-deep .el-form-item {
        width: 80%;
        display: flex;
        margin: 0 auto;
        justify-content: space-around;
        font-size: 30px;

        .el-input {
          .el-input__inner {
            width: 100%;
            margin-bottom: 20px;
          }
        }
      }
    }
  }
}

.zh-dia {
  width: 100%;
  // border:rgb(173, 17, 17) 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;

  .dia-item {
    width: 100%;
    height: 36px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item-name {
      width: 75px;
      white-space: nowrap;
    }

    .item-value {
      width: calc(100% - 75px);
      white-space: nowrap;
      text-align: center;
    }

    ::v-deep .el-input {
      width: 300px !important;
    }

    ::v-deep .el-input__inner {
      width: 300px !important;
    }
  }
}
</style>
